<template>
  <div>
    <el-dialog title="产品编辑" :visible.sync="dialogShow" @close="handleCancel" width="70%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称" prop="title">
          <el-input placeholder="请输入名称" v-model="productData.title" clearable></el-input>
        </el-form-item>

        <el-form-item label="商品图">
          <upload :fileList="fileList" :limit="2" ref="uploadImages"></upload>
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-select v-model="productData.unit" filterable placeholder="请选择">
            <el-option
              v-for="item in unit_list"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品分类" prop="category">
          <el-select v-model="productData.category_id" filterable placeholder="请选择">
            <el-option-group v-for="group in category" :key="group.label" :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="title">
          <tags ref="tags"></tags>
        </el-form-item>

        <el-row style="margin-top:20px">
          <div class="my_sku">
            <h3>属性</h3>
            <el-popover placement="right" width="200" v-model="addSkuVis" @hide="clearSku">
              <el-form :inline="true" :model="addSku" class="demo-form-inline">
                <el-form-item label="属性">
                  <el-input v-model="addSku.value" placeholder="属性" clearable></el-input>
                </el-form-item>
                <el-form-item label="价格">
                  <el-input
                    v-model="addSku.price"
                    placeholder="价格"
                    type="number"
                    min="0.00"
                    step="0.01"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onAddSku">添加</el-button>
                </el-form-item>
              </el-form>
              <el-button
                style="margin:20px 0;"
                type="default"
                slot="reference"
                icon="el-icon-edit"
              >添加属性</el-button>
            </el-popover>
            <el-row :gutter="20">
              <el-table
                style="margin-left:10px"
                ref="mySku"
                border
                stripe
                :data="productData.my_sku"
              >
                <el-table-column prop="value" label="属性"></el-table-column>
                <el-table-column prop="price" label="价格">
                  <template slot-scope="scope">
                    <el-input
                      placeholder="请输入价格"
                      type="number"
                      min="0.00"
                      step="0.01"
                      v-model="scope.row.price"
                      clearable
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="删除">
                  <template slot-scope="scope">
                    <el-button type="danger" @click="handleDelSku(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </div>
        </el-row>

        <el-row style="margin-top:20px;">
          <editor-bar v-model="productData.description" ref="editor" :isClear="isClear"></editor-bar>
          <!-- <avue-ueditor v-model="productData.description" disabled="true"></avue-ueditor> -->
        </el-row>
        <el-form-item style="margin-top:15px;">
          <el-button type="primary" @click="onSubmit('form')" >添加</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */

import { successMsg, errorMsg } from "@/util/message"
import { isNull } from "@/util/util";
import { uploadUrl } from '@/config/env'
import upload from '@/views/merchant/common/upload'
import EditorBar from '@/views/merchant/common/editorBar'
import tags from './tags'
import request from '@/router/axios'
import { baseUrl } from '@/config/env'


export default {
  props: ['id', 'showDetail'],
  components: {
    upload, EditorBar, tags
  },
  created() {
    // this.handleShow(this.id)
  },
  computed: {
    getImages() {
      let urls = this.fileList.map(item => {
        return item.url
      })
      return urls.join(',')
    }
  },
  data() {
    return {
      form: {
        cover: '',
        title: '',
        category: ''
      },
      uploadUrl: uploadUrl,
      dialogShow: false,
      productData: {
        title: '',
        images: '',
        category_id: '',
        my_sku: [],
        description: ''
      },
      fileList: [],  //上传文件
      submitProduct: {
        "product": {},
        "my_sku": []
      },
      addSku: {
        value: '',
        price: ''
      },
      addSkuVis: false,  //控制是否显示,
      category: {},
      resultImages: '',
      editor: {
        info: ''
      },
      isClear: true,
      unit_list: []
    }
  },
  methods: {
    onSubmit() {
      // 进行判断
      let vm = this

      let validata = vm.validate()
      if (validata != true) return validata

      this.handleAdd()
    },
    validate() {
      let vm = this
      vm.productData.images = vm.$refs.uploadImages.result

      if (isNull(vm.productData.title))
      {
        return errorMsg(vm, '标题不能为空')
      }
      if (isNull(vm.productData.images))
      {
        return errorMsg(vm, '图片不能为空')
      }
      if (isNull(vm.productData.category_id))
      {
        return errorMsg(vm, '分类不能为空')
      }
      if (isNull(vm.productData.my_sku))
      {
        return errorMsg(vm, '属性请至少添加一个')
      }

      return true
    },
    handleShow(id) {
      this.dialogShow = this.showDetail
      this.getCategory()

      //获取分类
      this.$store.dispatch('getDict', { key: 'product_unit' }).then(res => {
        this.unit_list = res.data.result.data
      })
    },
    getCategory() {
      request.get(baseUrl + '/categoryList', {})
        .then(
          res => {
            if (res.data.status == 1)            {
              this.category = res.data.result.data.map(item => {
                return {
                  label: item.name,
                  options: item.children.map(_item => {
                    return {
                      value: _item.id,
                      label: _item.name
                    }
                  })
                }
              })
            }
            else            {
              errorMsg(this, '添加失败')
            }
          }, error => {
            errorMsg(this, error)
          })

    },
    fillForm(data) {
      let vm = this
      vm.form.title = data.title
      vm.form.category = data.category_id
      vm.fileList = vm.filterImages(data)
      //增加图片的现实
    },
    filterImages(data) {
      let images = data.cover.split(',')
      let fileList = images.map(item => {
        return { url: item }
      })
      return fileList
    },
    // 移除图片

    handleCancel() {
      this.productData = {
        title: '',
        images: '',
        category_id: '',
        my_sku: [],
        description: ''
      }
      this.fileList = []
      this.form = {}
      this.dialogShow = false
      this.$refs.tags.dynamicTags = []
    },
    handleSelectionChange(val) {
      this.librarySelection = val;
    },
    handleAdd()   //添加产品信息
    {
      let vm = this

      vm.productData.description = this.$refs.editor.info_
      vm.productData.tags = this.$refs.tags.dynamicTags

      this.$store
        .dispatch("AddOwnProduct", vm.productData)
        .then(
          res => {
            if (res.data.status == 1)            {
              successMsg(this, '添加成功')
              this.$emit('refresh', '')
              this.handleCancel()
            }
            else            {
              errorMsg(this, '添加错误')
            }
          }, error => {
            errorMsg(this, error)
          })
    },
    // 添加sku
    onAddSku() {
      if (isNull(this.addSku.value))      {
        return errorMsg(this, '属性不能为空')
      }
      if (isNull(this.addSku.price))      {
        return errorMsg(this, '价格不能为空')
      }
      // 增加属性
      let vm = this
      this.productData.my_sku.push(this.addSku)
      this.addSkuVis = false
    },
    handleDelSku(index) {
      this.productData.my_sku.splice(index, 1)
    },
    clearSku() {
      console.log('clear')
      this.addSku = {
        value: '',
        price: ''
      }
    },
  }
}
</script>

<style>
</style>


